<template>
  <div class="case-analysis">
    <el-card class="analysis-card">
      <template #header>
        <div class="case-header">
          <h1 class="case-title">{{ caseDetail.title }}</h1>
          <div class="case-meta">
            <el-tag size="small" type="info">{{ caseDetail.industry }}</el-tag>
            <el-tag size="small" type="success" class="ml-2">{{ caseDetail.solution }}</el-tag>
            <span class="publish-time">发布时间：{{ caseDetail.publishTime }}</span>
          </div>
        </div>
      </template>

      <div class="case-content">
        <!-- 客户背景 -->
        <section class="content-section">
          <h2>客户背景</h2>
          <div class="section-content" v-html="caseDetail.background"></div>
        </section>

        <!-- 面临挑战 -->
        <section class="content-section">
          <h2>面临挑战</h2>
          <div class="section-content">
            <el-timeline>
              <el-timeline-item
                v-for="(challenge, index) in caseDetail.challenges"
                :key="index"
                :type="challenge.type"
                :color="challenge.color"
              >
                {{ challenge.content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </section>

        <!-- 解决方案 -->
        <section class="content-section">
          <h2>解决方案</h2>
          <div class="section-content">
            <el-collapse v-model="activeNames">
              <el-collapse-item
                v-for="(solution, index) in caseDetail.solutions"
                :key="index"
                :title="solution.title"
                :name="index"
              >
                <div v-html="solution.content"></div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </section>

        <!-- 实施效果 -->
        <section class="content-section">
          <h2>实施效果</h2>
          <div class="section-content">
            <el-row :gutter="20">
              <el-col :span="8" v-for="(result, index) in caseDetail.results" :key="index">
                <el-card class="result-card" shadow="hover">
                  <el-statistic :title="result.title" :value="result.value">
                    <template #suffix>
                      <span>{{ result.unit }}</span>
                    </template>
                  </el-statistic>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </section>
      </div>

      <div class="case-footer">
        <el-button @click="goBack">返回列表</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCaseDetail } from '@/api/cases'

const route = useRoute()
const router = useRouter()
const caseDetail = ref({})
const activeNames = ref([0])

const fetchCaseDetail = async () => {
  try {
    const res = await getCaseDetail(route.params.id)
    caseDetail.value = res.data
  } catch (error) {
    console.error('获取案例详情失败:', error)
  }
}

const goBack = () => {
  router.push('/cases')
}

onMounted(() => {
  fetchCaseDetail()
})
</script>

<style lang="scss" scoped>
.case-analysis {
  padding: 20px;

  .analysis-card {
    max-width: 1200px;
    margin: 0 auto;
  }

  .case-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #EBEEF5;

    .case-title {
      font-size: 28px;
      color: #303133;
      margin-bottom: 15px;
    }

    .case-meta {
      color: #909399;
      
      .ml-2 {
        margin-left: 10px;
      }
      
      .publish-time {
        margin-left: 20px;
        font-size: 14px;
      }
    }
  }

  .case-content {
    padding: 30px 0;

    .content-section {
      margin-bottom: 40px;

      h2 {
        font-size: 22px;
        color: #303133;
        margin-bottom: 20px;
        padding-left: 10px;
        border-left: 4px solid #409EFF;
      }

      .section-content {
        color: #606266;
        line-height: 1.8;
      }
    }

    .result-card {
      text-align: center;
      padding: 20px;
      
      :deep(.el-statistic__title) {
        font-size: 16px;
        color: #606266;
      }
      
      :deep(.el-statistic__content) {
        color: #409EFF;
      }
    }
  }

  .case-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #EBEEF5;
  }
}
</style> 